<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-26 16:09:32
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2024-12-31 11:09:52
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\components\Videos\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="video-component">
    <video ref="videoRef" :width="width" :height="height" @canplay="captureFirstFrame" :src="videoSrc"
      crossorigin="anonymous" @loadeddata="onVideoLoaded">
    </video>
    <img :src="firstFrameImage" v-if="firstFrameImage && !flge" class="imgs"
      :style="{ 'width': width + 'px', 'height': height + 'px' }" />
    <!-- <button @click="enterFullscreen">Fullscreen</button> -->
    <img class="btnimg" @click="enterFullscreen" src="../../assets/images/videostart.png" alt="">
  </div>
</template>

<script setup>
const props = defineProps({
  videoSrc: {
    type: String,
    required: true,
  },
  width: {
    type: String,
    default: 320,
  },
  height: {
    type: String,
    default: 240,
  }
},)
const flge = ref(false)
const videoRef = ref(null);
const firstFrameImage = ref(null);
console.log(props.videoSrc, '212321321')
const onVideoLoaded = () => {
  videoRef.value.currentTime = 2; // 设置当前时间为第2秒，如果需要第一帧，可以设置为0
  videoRef.value.onseeked = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = videoRef.value.clientWidth;
    canvas.height = videoRef.value.clientHeight;
    ctx.drawImage(videoRef.value, 0, 0, videoRef.value.clientWidth, videoRef.value.clientHeight);
    firstFrameImage.value = canvas.toDataURL('image/png');
  };
};

const enterFullscreen = () => {
  if (videoRef.value.requestFullscreen) {
    videoRef.value.requestFullscreen();
  } else if (videoRef.value.mozRequestFullScreen) {
    videoRef.value.mozRequestFullScreen();
  } else if (videoRef.value.webkitRequestFullscreen) {
    videoRef.value.webkitRequestFullscreen();
  } else if (videoRef.value.msRequestFullscreen) {
    videoRef.value.msRequestFullscreen();
  }
  videoRef.value.play()
  flge.value = true
};

onMounted(() => {
})
</script>

<style scoped>
.video-component {
  /* padding-top: 6px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}

/* .first-frame-image {
  margin-top: 10px;
  max-width: 100%;
  height: auto;
} */

.imgs {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.btnimg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 32px;
  height: 32px;
}
</style>

<!-- <template>
  <div class="video-component">
    <video ref="videoRef" :width="width" :height="height" controls src="../../assets/images/devceshi.mp4"
      crossorigin="anonymous" @loadeddata="onVideoLoaded">
    </video>
    <div v-if="firstFrameImage" class="imgs" :style="{ 'width': width + 'px', 'height': height + 'px' }">
      <img :src="firstFrameImage" alt="First frame" class="first-frame-image" />
    </div>
    <div @click="enterFullscreen">1321
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  videoSrc: {
    type: String,
    required: true,
  },
  width: {
    type: String,
    default: 320,
  },
  height: {
    type: String,
    default: 240,
  }
},)
const videoRef = ref(null);
const firstFrameImage = ref(null);
console.log(props.videoSrc, '2123')
const captureFirstFrame = () => {
  const canvas = document.createElement('canvas');
  canvas.width = videoRef.value.videoWidth;
  canvas.height = videoRef.value.videoHeight;
  const context = canvas.getContext('2d');
  try {
    context.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height);
    firstFrameImage.value = canvas.toDataURL('image/png');
  } catch (error) {
    // 如果捕获失败（可能是因为视频还没有完全准备好），
    // 你可以在这里添加一些错误处理逻辑，比如设置一个定时器重试。
    console.error('Failed to capture first frame:', error);
  }
};
const cutImage = () => {
  // const video = this.$refs.fileVideo;
  videoRef.value.currentTime = 2; // 设置当前时间为第2秒，如果需要第一帧，可以设置为0
  videoRef.value.onseeked = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = videoRef.value.clientWidth;
    canvas.height = videoRef.value.clientHeight;
    ctx.drawImage(videoRef.value, 0, 0, videoRef.value.clientWidth, videoRef.value.clientHeight);
    firstFrameImage.value = canvas.toDataURL('image/png');
  };
}
const onVideoLoaded = () => {
  cutImage()
}
const enterFullscreen = () => {
  if (videoRef.value.requestFullscreen) {
    videoRef.value.requestFullscreen();
  } else if (videoRef.value.mozRequestFullScreen) {
    videoRef.value.mozRequestFullScreen();
  } else if (videoRef.value.webkitRequestFullscreen) {
    videoRef.value.webkitRequestFullscreen();
  } else if (videoRef.value.msRequestFullscreen) {
    videoRef.value.msRequestFullscreen();
  }
};

onMounted(() => {
})
</script>

<style scoped>
.video-component {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.first-frame-image {
  margin-top: 10px;
  max-width: 100%;
  height: auto;
}

.imgs {
  position: absolute;
  background: rgba(0, 0, 0, 1);
}
</style> -->